<template>
  <view class="isometric-container">
    <!-- 顶部导航 -->
    <view class="nav-bar">
      <text class="nav-title">健康档案中心</text>
    </view>

    <!-- 主体内容：等距布局的健康档案模块 -->
    <view class="main-content">
      <!-- 左侧：用户基础信息区 -->
      <view class="module left-module">
        <text class="module-title">个人信息</text>
        
        <!-- 用户信息卡片 -->
        <view class="user-info-card">
          <view class="user-header">
            <view class="avatar-box">
              <uni-icons type="person" size="50" color="#fff"></uni-icons>
            </view>
            <view class="user-base-info">
              <text class="user-name">用户10086</text>
              <text class="user-id">ID: 100861122</text>
            </view>
          </view>

          <!-- 档案完整度 -->
          <view class="file-completeness">
            <text class="completeness-title">档案完整度</text>
            <view class="progress-bar">
              <view class="progress-fill" :style="{ width: completeness + '%' }"></view>
            </view>
            <text class="completeness-value" @click="handleCompleteFile">{{ completeness }}%（点击完善）</text>
          </view>

          <!-- 用户基础数据 -->
          <view class="user-data-grid">
            <view class="data-item">
              <text class="data-label">性别</text>
              <text class="data-value">{{ userData.gender }}</text>
            </view>
            <view class="data-item">
              <text class="data-label">年龄</text>
              <text class="data-value">{{ userData.age }}岁</text>
            </view>
            <view class="data-item">
              <text class="data-label">血型</text>
              <text class="data-value">{{ userData.bloodType }}</text>
            </view>
            <view class="data-item">
              <text class="data-label">身高/体重</text>
              <text class="data-value">{{ userData.height }}cm/{{ userData.weight }}kg</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 中间：健康管理功能区 -->
      <view class="module center-module">
        <text class="module-title">健康管理</text>
        
        <!-- 功能网格 -->
        <view class="function-grid">
          <!-- 健康画像 -->
          <view class="function-item" @click="handleFunctionClick('portrait')">
            <view class="function-icon blue-icon">
              <uni-icons type="chart-pie" size="28" color="#fff"></uni-icons>
            </view>
            <text class="function-name">健康画像</text>
          </view>
          
          <!-- 健康记录 -->
          <view class="function-item" @click="handleFunctionClick('record')">
            <view class="function-icon green-icon">
              <uni-icons type="list" size="28" color="#fff"></uni-icons>
            </view>
            <text class="function-name">健康记录</text>
          </view>
          
          <!-- 生活习惯 -->
          <view class="function-item" @click="handleFunctionClick('habit')">
            <view class="function-icon blue-icon">
              <uni-icons type="coffee" size="28" color="#fff"></uni-icons>
            </view>
            <text class="function-name">生活习惯</text>
          </view>
          
          <!-- 健康史 -->
          <view class="function-item" @click="handleFunctionClick('history')">
            <view class="function-icon green-icon">
              <uni-icons type="heart" size="28" color="#fff"></uni-icons>
            </view>
            <text class="function-name">健康史</text>
          </view>
        </view>

        <!-- 近期健康指标 -->
        <view class="recent-indicators">
          <text class="indicators-title">近期健康指标</text>
          <view class="indicators-list">
            <view class="indicator-item" v-for="(item, index) in recentIndicators" :key="index">
              <text class="indicator-label">{{ item.label }}：</text>
              <text class="indicator-value">{{ item.value }}</text>
              <text class="indicator-status" :class="item.status === 'normal' ? 'normal' : 'abnormal'">
                {{ item.status === 'normal' ? '正常' : '异常' }}
              </text>
            </view>
          </view>
        </view>
      </view>

      <!-- 右侧：健康记录查询区 -->
      <view class="module right-module">
        <text class="module-title">记录查询</text>
        
        <!-- 健康记录卡片 -->
        <view class="health-records-card">
          <view class="section-header">
            <text class="section-title">健康记录</text>
            <text class="section-more" @click="viewAllRecords">查看全部</text>
          </view>

          <view class="records-grid">
            <!-- 问诊记录 -->
            <view class="record-item blue-bg" @click="handleRecordClick('consult')">
              <view class="record-icon">
                <uni-icons type="message" size="24" color="#2980b9"></uni-icons>
              </view>
              <text class="record-name">问诊记录</text>
              <text class="record-count">{{ recordCounts.consult }}条</text>
            </view>
            
            <!-- 用药记录 -->
            <view class="record-item green-bg" @click="handleRecordClick('medicine')">
              <view class="record-icon">
                <uni-icons type="pill" size="24" color="#27ae60"></uni-icons>
              </view>
              <text class="record-name">用药记录</text>
              <text class="record-count">{{ recordCounts.medicine }}条</text>
            </view>
            
            <!-- 体检报告 -->
            <view class="record-item blue-bg" @click="handleRecordClick('physical')">
              <view class="record-icon">
                <uni-icons type="file-text" size="24" color="#2980b9"></uni-icons>
              </view>
              <text class="record-name">体检报告</text>
              <text class="record-count">{{ recordCounts.physical }}条</text>
            </view>
            
            <!-- 挂号记录 -->
            <view class="record-item green-bg" @click="handleRecordClick('register')">
              <view class="record-icon">
                <uni-icons type="calendar" size="24" color="#27ae60"></uni-icons>
              </view>
              <text class="record-name">挂号记录</text>
              <text class="record-count">{{ recordCounts.register }}条</text>
            </view>
          </view>
        </view>

        <!-- 档案导出功能 -->
        <view class="export-card">
          <view class="export-btn" @click="exportHealthFile">
            <uni-icons type="download" size="20" color="#fff" class="export-icon"></uni-icons>
            <text class="export-text">导出健康档案</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

// 用户基础数据
const userData = ref({
  gender: '男',
  age: 30,
  bloodType: 'A型',
  height: 175,
  weight: 65
});

// 档案完整度
const completeness = ref(75);

// 近期健康指标
const recentIndicators = ref([
  { label: '心率', value: '72次/分', status: 'normal' },
  { label: '血压', value: '120/80mmHg', status: 'normal' },
  { label: '血糖', value: '5.6mmol/L', status: 'normal' },
  { label: '体温', value: '36.5℃', status: 'normal' }
]);

// 各类型记录数量
const recordCounts = ref({
  consult: 3,
  medicine: 2,
  physical: 1,
  register: 4
});

// 完善档案点击事件
const handleCompleteFile = () => {
  uni.showToast({
    title: '进入档案完善页面',
    icon: 'none'
  });
};

// 功能项点击事件
const handleFunctionClick = (type) => {
  const titles = {
    portrait: '查看健康画像',
    record: '查看健康记录',
    habit: '查看生活习惯',
    history: '查看健康史'
  };
  uni.showToast({
    title: titles[type],
    icon: 'none'
  });
};

// 记录项点击事件
const handleRecordClick = (type) => {
  const titles = {
    consult: '查看问诊记录',
    medicine: '查看用药记录',
    physical: '查看体检报告',
    register: '查看挂号记录'
  };
  uni.showToast({
    title: titles[type],
    icon: 'none'
  });
};

// 查看全部记录
const viewAllRecords = () => {
  uni.showToast({
    title: '查看全部健康记录',
    icon: 'none'
  });
};

// 导出健康档案
const exportHealthFile = () => {
  uni.showToast({
    title: '开始导出健康档案',
    icon: 'none'
  });
};
</script>

<style scoped>
/* 全局容器：等距视角背景 */
.isometric-container {
  background-color: #f5f7fa;
  min-height: 100vh;
  padding: 20px;
}

/* 顶部导航栏 */
.nav-bar {
  background: linear-gradient(135deg, #6b7fd7, #8a5cf6);
  border-radius: 12px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30px;
  box-shadow: 0 4px 12px rgba(107, 127, 215, 0.2);
}

.nav-title {
  color: #ffffff;
  font-size: 20px;
  font-weight: bold;
}

/* 主体内容布局 */
.main-content {
  display: block;
  justify-content: space-between;
  gap: 20px;
}

.module {
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  padding: 20px;
  flex: 1;
}

.module-title {
  font-size: 16px;
  font-weight: bold;
  color: #6b7fd7;
  margin-bottom: 15px;
  display: block;
}

/* 左侧：用户基础信息区 */
.user-info-card {
  background: linear-gradient(135deg, #e6eaf5, #f0f2fa);
  border-radius: 8px;
  padding: 18px;
}

.user-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.avatar-box {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6b7fd7, #8a5cf6);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  box-shadow: 0 4px 8px rgba(107, 127, 215, 0.3);
}

.user-name {
  font-size: 18px;
  font-weight: bold;
  color: #333333;
  display: block;
  margin-bottom: 4px;
}

.user-id {
  font-size: 12px;
  color: #888888;
}

.file-completeness {
  margin-bottom: 15px;
}

.completeness-title {
  font-size: 14px;
  color: #666666;
  margin-bottom: 8px;
  display: block;
}

.progress-bar {
  width: 100%;
  height: 8px;
  background-color: #ffffff;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 6px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #6b7fd7, #8a5cf6);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.completeness-value {
  font-size: 12px;
  color: #6b7fd7;
  font-weight: 500;
  cursor: pointer;
}

.user-data-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.data-item {
  width: calc(50% - 6px);
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  padding: 10px;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
}

.data-label {
  font-size: 12px;
  color: #999999;
  margin-bottom: 4px;
}

.data-value {
  font-size: 14px;
  color: #333333;
  font-weight: 500;
}

/* 中间：健康管理功能区 */
.function-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 20px;
}

.function-item {
  width: calc(50% - 7.5px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 0;
  border-radius: 8px;
  background-color: #f9f9f9;
  transition: all 0.3s ease;
  cursor: pointer;
}

.function-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(107, 127, 215, 0.1);
}

.function-item:active {
  transform: scale(0.98);
  background-color: #f0f0f0;
}

.function-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.3);
}

.blue-icon {
  background: linear-gradient(135deg, #6b7fd7, #8a5cf6);
}

.green-icon {
  background: linear-gradient(135deg, #5bd1a3, #45b787);
}

.function-name {
  font-size: 14px;
  color: #333333;
  font-weight: 500;
}

.recent-indicators {
  background: linear-gradient(135deg, #e6eaf5, #f0f2fa);
  border-radius: 8px;
  padding: 15px;
}

.indicators-title {
  font-size: 14px;
  font-weight: 600;
  color: #6b7fd7;
  margin-bottom: 12px;
  display: block;
}

.indicators-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.indicator-item {
  background-color: #ffffff;
  padding: 10px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
}

.indicator-label {
  font-size: 14px;
  color: #666666;
}

.indicator-value {
  font-size: 14px;
  color: #333333;
  font-weight: 500;
}

.indicator-status {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 10px;
}

.normal {
  color: #45b787;
  background-color: #e6f7ef;
}

.abnormal {
  color: #e74c3c;
  background-color: #fef2f2;
}

/* 右侧：健康记录查询区 */
.health-records-card {
  margin-bottom: 20px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.section-title {
  font-size: 14px;
  font-weight: 600;
  color: #6b7fd7;
}

.section-more {
  font-size: 12px;
  color: #8a5cf6;
  font-weight: 500;
  cursor: pointer;
}

.records-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.record-item {
  width: calc(50% - 6px);
  border-radius: 8px;
  padding: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.3s ease;
  cursor: pointer;
}

.record-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.record-item:active {
  transform: scale(0.98);
}

.blue-bg {
  background: linear-gradient(180deg, #f0f7ff, #e6f0ff);
}

.green-bg {
  background: linear-gradient(180deg, #f0fdf4, #e6f7ef);
}

.record-icon {
  margin-right: 10px;
}

.record-name {
  font-size: 14px;
  color: #333333;
  font-weight: 500;
  flex: 1;
}

.record-count {
  font-size: 12px;
  color: #6b7fd7;
  background-color: #ffffff;
  padding: 2px 8px;
  border-radius: 10px;
}

.export-card {
  background: linear-gradient(135deg, #6b7fd7, #8a5cf6);
  border-radius: 8px;
  padding: 15px;
}

.export-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  cursor: pointer;
  padding: 10px;
  border-radius: 6px;
  background-color: rgba(255, 255, 255, 0.1);
  transition: background-color 0.3s ease;
}

.export-btn:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.export-icon {
  margin-right: 8px;
}

.export-text {
  font-size: 16px;
  font-weight: 500;
}

/* 响应式适配 */
@media (max-width: 768px) {
  .main-content {
    flex-direction: column;
  }
}
</style>
